@import 'normalize.css';
@import './variables.less';

/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background-color: @background-color;
}

#app {
  height: 100%;
}

/* 通用样式类 */
.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.text-center {
  text-align: center;
}

.full-height {
  height: 100%;
}

.full-width {
  width: 100%;
}

.pointer {
  cursor: pointer;
}

/* 按钮样式 */
.btn {
  padding: 8px 16px;
  border-radius: @border-radius-md;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background-color: @primary-color;
  color: white;
}

.btn-primary:hover {
  background-color: darken(@primary-color, 10%);
}

.btn-secondary {
  background-color: @secondary-color;
  color: white;
}

.btn-secondary:hover {
  background-color: darken(@secondary-color, 10%);
}

.btn-outline {
  background-color: transparent;
  border: 1px solid @border-color;
}

.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* 输入框样式 */
.input {
  padding: 8px 12px;
  border-radius: @border-radius-sm;
  border: 1px solid @border-color;
  background-color: @input-bg;
  font-family: inherit;
}

.input:focus {
  outline: none;
  border-color: @primary-color;
}

/* 卡片样式 */
.card {
  background-color: @input-bg;
  border-radius: @border-radius-lg;
  padding: @spacing-lg;
  box-shadow: @box-shadow;
}

/* 文本样式 */
.text-primary {
  color: @primary-color;
}

.text-secondary {
  color: @secondary-color;
}

.text-muted {
  opacity: 0.7;
}

.text-sm {
  font-size: @font-size-sm;
}

.text-md {
  font-size: @font-size-md;
}

.text-lg {
  font-size: @font-size-lg;
}

.text-xl {
  font-size: @font-size-xl;
}

/* 间距样式 */
.mt-1 { margin-top: @spacing-xs; }
.mt-2 { margin-top: @spacing-sm; }
.mt-3 { margin-top: @spacing-md; }
.mt-4 { margin-top: @spacing-lg; }
.mt-5 { margin-top: @spacing-xl; }

.mb-1 { margin-bottom: @spacing-xs; }
.mb-2 { margin-bottom: @spacing-sm; }
.mb-3 { margin-bottom: @spacing-md; }
.mb-4 { margin-bottom: @spacing-lg; }
.mb-5 { margin-bottom: @spacing-xl; }

.ml-1 { margin-left: @spacing-xs; }
.ml-2 { margin-left: @spacing-sm; }
.ml-3 { margin-left: @spacing-md; }
.ml-4 { margin-left: @spacing-lg; }
.ml-5 { margin-left: @spacing-xl; }

.mr-1 { margin-right: @spacing-xs; }
.mr-2 { margin-right: @spacing-sm; }
.mr-3 { margin-right: @spacing-md; }
.mr-4 { margin-right: @spacing-lg; }
.mr-5 { margin-right: @spacing-xl; }

.p-1 { padding: @spacing-xs; }
.p-2 { padding: @spacing-sm; }
.p-3 { padding: @spacing-md; }
.p-4 { padding: @spacing-lg; }
.p-5 { padding: @spacing-xl; }

/* 动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

// 定义 flex 相关类
.flex {
  display: flex;
  &.column {
    flex-direction: column;
  }
  &.between {
    justify-content: space-between;
  }
  // Aligns items with equal space around them
  &.around {
    justify-content: space-around;
  }
  &.hcenter {
    justify-content: center;
  }
  &.right {
    justify-content: flex-end;
  }
  &.left {
    justify-content: flex-start;
  }
  &.top {
    align-items: flex-start;
  }
  &.bottom {
    align-items: flex-end;
  }
  &.vcenter {
    align-items: center;
  }
  &.reverse {
    flex-direction: row-reverse;
  }
  &.wrap {
    flex-wrap: wrap;
    &.top {
      align-content: flex-start;
    }
  }
  &.wrap-start {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  &.wrap-break {
    white-space: pre-wrap;
    word-break: break-all;
  }
}
.inline-block{
  display: inline-block;
}
.shk0 {
  flex-shrink: 0;
}

// flex
@flex: 0 1 2 3 4 5 6 7 8 9;
.loop(@index) when (@index > -1) {
  .flex@{index} {
      flex: @index;
  }
  .ls@{index} {
      letter-spacing: @index * 1px;
  }
  .loop(@index - 1);
}
.loop(length(@flex) - 1);

.bold {
  font-weight: bold;
}

// font-weight
@fw: 1 2 3 4 5 6 7 8 9;
.loop-fw(@index) when (@index > -1) {
  @fwv: extract(@fw, @index + 1) * 100;
  .fw@{fwv} {
      font-weight: @fwv;
  }
  .loop-fw(@index - 1);
}
.loop-fw(length(@fw) - 1);

// line-height
@lh: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29;
.loop-lh(@index) when (@index > -1) {
  @lhv: extract(@lh, @index + 1) * 1;
  .lh@{lhv} {
      line-height: @lhv * 1px;
  }
  .loop-lh(@index - 1);
}
.loop-lh(length(@lh) - 1);

// font-size
@font: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29;
.loop-font(@index) when (@index > -1) {
  @ftv: extract(@font, @index + 1) * 1;
  .font@{ftv} {
      font-size: @ftv * 1px;
  }
  .loop-font(@index - 1);
}
.loop-font(length(@font) - 1);

// line
@line: 0 1 2 3 4 5 6 7 8 9;
.loop-line(@index) when (@index > -1) {
  .line@{index} {
      width: 100%;
      text-overflow: ellipsis;
      word-break: break-all;
      display: -webkit-box !important;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: @index;
      overflow: hidden;
  }
  .loop-line(@index - 1);
}
.loop-line(length(@line) - 1);


// 定义一个列表，包含从 0 到 29 的数字，用于后续生成 letter-spacing 的值
@ls: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29;
.loop-ls(@index) when (@index > -1) {
  @lsv: extract(@ls, @index + 1) * 0.1;
  .ls@{lsv} {
      letter-spacing: @lsv * 1px;
  }
  .loop-ls(@index - 1);
}
.loop-ls(length(@ls) - 1);
// margin & padding
.mt0 {
  margin-top: 0 !important;
}
.mr0 {
  margin-right: 0 !important;
}
.mb0 {
  margin-bottom: 0 !important;
}
.ml0 {
  margin-left: 0 !important;
}
.mg0 {
  margin: 0 !important;
}
.pt0 {
  padding-top: 0 !important;
}
.pr0 {
  padding-right: 0 !important;
}
.pb0 {
  padding-bottom: 0 !important;
}
.pl0 {
  padding-left: 0 !important;
}
.pd0 {
  padding: 0 !important;
}
@mp: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30;
.loop-mp(@index) when (@index > -1) {
  @step: 5;
  @calc: extract(@mp, @index + 1) * @step;
  .mt@{calc} {
      margin-top: ~'@{calc}px !important';
  }
  .mr@{calc} {
      margin-right: ~'@{calc}px !important';
  }
  .ml@{calc} {
      margin-left: ~'@{calc}px !important';
  }
  .mb@{calc} {
      margin-bottom: ~'@{calc}px !important';
  }

  .pt@{calc} {
      padding-top: ~'@{calc}px !important';
  }
  .pr@{calc} {
      padding-right: ~'@{calc}px !important';
  }
  .pl@{calc} {
      padding-left: ~'@{calc}px !important';
  }
  .pb@{calc} {
      padding-bottom: ~'@{calc}px !important';
  }
  .loop-mp(@index - 1);
}
.loop-mp(length(@mp) - 1);

// Margins
@margin-xs: 5px;
@margin-sm: 10px;
@margin-md: 15px;
@margin-lg: 20px;
@margin-xl: 25px;
@margin-xxl: 30px;
@margin-xxxl: 35px;
.mt-xs { margin-top: @margin-xs !important; }
.mt-sm { margin-top: @margin-sm !important; }
.mt-md { margin-top: @margin-md !important; }
.mt-lg { margin-top: @margin-lg !important; }
.mt-xl { margin-top: @margin-xl !important; }
.mt-xxl { margin-top: @margin-xxl !important; }
.mt-xxxl { margin-top: @margin-xxxl !important; }

.mr-xs { margin-right: @margin-xs !important; }
.mr-sm { margin-right: @margin-sm !important; }
.mr-md { margin-right: @margin-md !important; }
.mr-lg { margin-right: @margin-lg !important; }
.mr-xl { margin-right: @margin-xl !important; }
.mr-xxl { margin-right: @margin-xxl !important; }
.mr-xxxl { margin-right: @margin-xxxl !important; }

.mb-xs { margin-bottom: @margin-xs !important; }
.mb-sm { margin-bottom: @margin-sm !important; }
.mb-md { margin-bottom: @margin-md !important; }
.mb-lg { margin-bottom: @margin-lg !important; }
.mb-xl { margin-bottom: @margin-xl !important; }
.mb-xxl { margin-bottom: @margin-xxl !important; }
.mb-xxxl { margin-bottom: @margin-xxxl !important; }

.ml-xs { margin-left: @margin-xs !important; }
.ml-sm { margin-left: @margin-sm !important; }
.ml-md { margin-left: @margin-md !important; }
.ml-lg { margin-left: @margin-lg !important; }
.ml-xl { margin-left: @margin-xl !important; }
.ml-xxl { margin-left: @margin-xxl !important; }
.ml-xxxl { margin-left: @margin-xxxl !important; }

// Paddings
@padding-xs: 5px;
@padding-sm: 10px;
@padding-md: 15px;
@padding-lg: 20px;
@padding-xl: 25px;
@padding-xxl: 30px;
@padding-xxxl: 35px;
.pt-xs { padding-top: @padding-xs !important; }
.pt-sm { padding-top: @padding-sm !important; }
.pt-md { padding-top: @padding-md !important; }
.pt-lg { padding-top: @padding-lg !important; }
.pt-xl { padding-top: @padding-xl !important; }
.pt-xxl { padding-top: @padding-xxl !important; }
.pt-xxxl { padding-top: @padding-xxxl !important; }

.pr-xs { padding-right: @padding-xs !important; }
.pr-sm { padding-right: @padding-sm !important; }
.pr-md { padding-right: @padding-md !important; }
.pr-lg { padding-right: @padding-lg !important; }
.pr-xl { padding-right: @padding-xl !important; }
.pr-xxl { padding-right: @padding-xxl !important; }
.pr-xxxl { padding-right: @padding-xxxl !important; }

.pb-xs { padding-bottom: @padding-xs !important; }
.pb-sm { padding-bottom: @padding-sm !important; }
.pb-md { padding-bottom: @padding-md !important; }
.pb-lg { padding-bottom: @padding-lg !important; }
.pb-xl { padding-bottom: @padding-xl !important; }
.pb-xxl { padding-bottom: @padding-xxl !important; }
.pb-xxxl { padding-bottom: @padding-xxxl !important; }

.pl-xs { padding-left: @padding-xs !important; }
.pl-sm { padding-left: @padding-sm !important; }
.pl-md { padding-left: @padding-md !important; }
.pl-lg { padding-left: @padding-lg !important; }
.pl-xl { padding-left: @padding-xl !important; }
.pl-xxl { padding-left: @padding-xxl !important; }
.pl-xxxl { padding-left: @padding-xxxl !important; }

// Font sizes
@size-xs: 10px;
@size-sm: 12px;
@size-md: 14px;
@size-lg: 16px;
@size-xl: 18px;
@size-xxl: 20px;
@size-xxxl: 22px;
.font-xs { font-size: @size-xs !important; }
.font-sm { font-size: @size-sm !important; }
.font-md { font-size: @size-md !important; }
.font-lg { font-size: @size-lg !important; }
.font-xl { font-size: @size-xl !important; }
.font-xxl { font-size: @size-xxl !important; }
.font-xxxl { font-size: @size-xxxl !important; }

// Line heights
.lh-xs { line-height: @size-xs !important; }
.lh-sm { line-height: @size-sm !important; }
.lh-md { line-height: @size-md !important; }
.lh-lg { line-height: @size-lg !important; }
.lh-xl { line-height: @size-xl !important; }
.lh-xxl { line-height: @size-xxl !important; }
.lh-xxxl { line-height: @size-xxxl !important; }

// width & height
.wmax {
  width: 100%;
}
.hmax {
  height: 100%;
}
.vw100 {
  width: 100vw;
}
.vh100 {
  height: 100vh;
}
.vminh{
  min-height: calc(100vh - 180px);
}
.topline {
  border-bottom: 1px solid #cb272d;
}
@wandh: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49;
.loop-wandh(@index) when (@index > -1) {
  @step: if(extract(@wandh, @index + 1) <= 20, 5, 10);
  @calc: if(@step = 5, extract(@wandh, @index + 1) * @step, extract(@wandh, @index + 1) * @step - 100);
  .w@{calc} {
      width: ~'@{calc}px !important';
  }
  .h@{calc} {
      height: ~'@{calc}px !important';
  }
  .maxh@{calc} {
      max-height: ~'@{calc}px !important';
  }
  .minh@{calc} {
      min-height: ~'@{calc}px !important';
  }
  .maxw@{calc} {
      max-width: ~'@{calc}px !important';
  }
  .minw@{calc} {
      min-width: ~'@{calc}px !important';
  }
  .loop-wandh(@index - 1);
}
.loop-wandh(length(@wandh) - 1);

/* 溢出文本省略号 */
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input, button, textarea{
  color: #000000;
}